<!--
  Generated template for the PcontentPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>

    <ion-segment [(ngModel)]="tabs" color="danger">
      <ion-segment-button value="plist">
        <!-- <ion-icon name="camera"></ion-icon> -->
        商品
      </ion-segment-button>
      <ion-segment-button value="pcontent">
        <!-- <ion-icon name="bookmark"></ion-icon> -->
        详情
      </ion-segment-button>
      <ion-segment-button value="comment">
          <!-- <ion-icon name="bookmark"></ion-icon> -->
          评论
        </ion-segment-button>
    </ion-segment>

  </ion-navbar>



</ion-header>


<ion-content padding>
  <div class="all-contnet">
      <div [ngSwitch]="tabs">

        <div class="tabs1" *ngSwitchCase="'plist'">  
          <div class="tabs1-img">
             <img [src]="config.apiUrl+item.pic" />   
          </div>
          <div class="tabs1-content">
            <div class="tabs1-content-title">
              <h2>{{item.title}}</h2>
              <p>{{item.sub_title}}</p>
            </div>
            <div class="tabs1-content-money  mb10">
              <span class="oldmoney">原价:<s>￥{{item.price}}</s></span>
              <span class="nowmoney">特价:<span>￥{{item.old_price}}</span></span>
            </div>

            <div class="other mb10">
              <div  #myattr  id="myattr">
                <div *ngIf="item.attr">
                    <div class="color" *ngFor="let attr of item.attr" >
                      <strong>{{attr.cate}}:</strong>
                      <span *ngFor="let cl of attr.list;let key=index;"  [ngClass]="{'active':key==0}">
                        {{cl}}
                      </span>
                    
                    </div>
                </div>
              </div>

              <div class="number">
                  <div class="cart-info">
                    <div class="money">数量：</div>
                    <div class="add">
                      <div class="add-left" (click)="cutNum()">-</div>
                      <div class="add-text">
                        <input type="text" name="num" id="" placeholder="1" [(ngModel)]="num">
                      </div>
                      <div class="add-right" (click)="addNum()">+</div>
                    </div>
                  </div>
              </div>

            </div>
          </div>
        </div>

        <div class="tabs2" *ngSwitchCase="'pcontent'">
          <div [innerHTML]='item.content'>

          </div>
        </div>
        <div class="tabs3" *ngSwitchCase="'comment'">
          评论
        </div>

      </div>
  </div>
</ion-content>


<ion-footer>
  <ion-toolbar >

    <div class="footer_bar">
      <div class="carticon" [navPush]="CartPage">            
          <ion-icon name="cart"></ion-icon> 
          <!-- <p>购物车</p> -->
          <ion-badge color="danger">{{carts_num}}</ion-badge>
      </div>
      
      <div class="addcart" (click)="addCart()" >
          加入购物车
      </div>
      <div class="buy">
          立即购买
      </div>
    </div>

  </ion-toolbar>
</ion-footer>